<template>
    <div class="device-list-wrap">
        <!-- 搜索 -->
        <div class="search-form">
            <!-- 单位筛选框 -->
            <el-select v-model="searchForm.orgId" filterable slot="prepend" placeholder="请选择单位" @change="handleOrgChange">
                <el-option v-if="isMuilUnitUser" label="所有单位" :value="$store.state.userInfo.organizationIds"></el-option>
                <el-option v-for="item in orgList" :label="item.orgName" :value="item.orgId.toString()" :key="item.orgId"></el-option>
            </el-select>
            <!-- 建筑物筛选框 -->
            <tree-select
                v-if="buildList.length > 0"
                v-model="searchForm.fbsId"
                filterable
                :data="buildList"
                placeholder="请选择建筑物"
                :defaultProps="buildDefaultProps"
                :checkedKeys="defaultCheckedFbsId"
                :nodeKey="buildNodeKey">
            </tree-select>
            <span>|</span>
            <!-- 系统筛选框 -->
            <el-select v-model="searchForm.systemId" slot="prepend" filterable placeholder="请选择系统" @change="getDeviceList(1)">
                <el-option label="全部系统" value="-1"></el-option>
                <el-option v-for="item in sysList" :label="item.fireSystemName" :value="item.id" :key="item.id"></el-option>
            </el-select>
        </div>
        <div class="header-type-choose">
            <ul class="status-list">
                <li class="status-item" :class="{'type-bj': fireTType === 10}" @click="fireTType === 10 ? fireTType = -1 : fireTType = 10">报警</li>
                <li class="status-item" :class="{'type-gz': fireTType === 20}" @click="fireTType === 20 ? fireTType = -1 : fireTType = 20">故障</li>
                <li class="status-item" :class="{'type-pb': fireTType === 30}" @click="fireTType === 30 ? fireTType = -1 : fireTType = 30">屏蔽</li>
                <li class="status-item" :class="{'type-ld': fireTType === 40}" @click="fireTType === 40 ? fireTType = -1 : fireTType = 40">联动</li>
                <li class="status-item" :class="{'type-zc': fireTType === 0}" @click="fireTType === 0 ? fireTType = -1 : fireTType = 0">正常</li>
            </ul>
            <div class="search-text">
                <el-input placeholder="请输入关键词搜索" v-model="searchForm.text" class="input-with-select" @keyup.enter.native="getDeviceList(1)" @clear="getDeviceList(1)" clearable>
                    <i class="el-icon-search el-input__icon" slot="prefix"></i>
                </el-input>
            </div>
        </div>
        <div class="result-list-wrap">
            <ul class="result-list">
                <li v-for="item in listData" :key="item.fcFacilitiesId" @click="clickDevice(item)" :class="{'active': item.fcFacilitiesId == selectedFcId}">
                    <div class="result-item" :class="resultStyle(item.fireTType)">
                        <div class="device-item-img">
                            <el-image
                                style="width: 70px; height: 60px"
                                :src="item.icon?JSON.parse(item.icon).icon:''"
                                fit="contain">
                                <!-- 暂无图片 -->
                                <div slot="error" class="image-slot">
                                    <div class="no-image2"></div>
                                </div>
                            </el-image>
                        </div>
                        <div class="device-item-desc">
                            <p class="device-name ell">
                                <span
                                    v-if="
                                        item.handleStatus == -1 &&
                                            item.isBeyondHandler == 1
                                    "
                                    style="color:rgba(255, 0, 0, 0.8);"
                                    >超时</span
                                >
                                <span class="dealwith-status" v-show="item.fireTType !== 0 && item.handleStatus != 1 && item.handleStatus != 2">未处理</span>
                                <el-tooltip class="item" effect="dark" :content="item.fcFacilitiesName">
                                    <span>{{ item.fcFacilitiesName }}</span>
                                </el-tooltip>
                            </p>
                            <p class="device-location ell">{{ item.location }}</p>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
            <el-pagination
                :hide-on-single-page=true
                class="page-model"
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getDetectorStatusList, getSysFcfCategoryTree, getBsFacsBaseInfo } from '@/api/detectorMonitor'
import { getFbsTrees } from '@/api/common'
import { getOrgsStatusList } from '@/api/organization'
import TreeSelect from '@/libs/TreeSelect/Main'

export default {
    props: {
        parames: {
            default() {
                return false
            }
        }
    },
    components: {
        TreeSelect
    },
    data() {
        return {
            // 建筑物
            buildDefaultProps: {
                children: 'nodes',
                label: 'text',
                value: 'id'
            },
            buildNodeKey: 'id',
            defaultCheckedFbsId: [],
            buildList: [],
            sysList: [], // 系统数据
            fireTType: this.parames.status || -1, // 报警类型 -1：所有 0：正常 10：报警 20：故障 30：屏蔽 40：联动
            searchForm: {
                orgId: (this.parames && this.parames.orgId) ? this.parames.orgId.toString() : ((this.parames && this.parames.organizationId) ? this.parames.organizationId.toString() : this.$store.state.userInfo.organizationIds),
                fbsId: (this.parames && this.parames.fbsId) ? this.parames.fbsId.toString() : '',
                systemId: (this.parames && this.parames.systemId) ? this.parames.systemId : '-1',
                text: (this.parames && this.parames.name) ? this.parames.name : '',
                fcfId: (this.parames && this.parames.fcfId) ? this.parames.fcfId : '',
            },
            total: 0,
            currentPage: 1,
            pageSize: 6,
            listData: [], // 列表数据
            selectedFcId: '', // 选择的设备Id
            isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
        }
    },
    created() {
        let that = this
        that.getSysData()
        that.getDeviceList()
        
        if(that.parames && that.parames.orgId && String(that.parames.orgId).split(',').length == 1) {
            // 获取建筑物数据
            that.getBuildData()
            // 跳转的回显建筑物默认选中值
            that.defaultCheckedFbsId = this.parames.fbsId ? this.parames.fbsId.toString().split(',') : []
        }
    },
    methods: {
        handleOrgChange(){
            if(this.searchForm.orgId.indexOf(',')<0){
                this.searchForm.text=''
            }
            this.searchForm.fbsId=''
            this.getDeviceList(1)
        },
        // 获取建筑结构
        getBuildData() {
            let that = this
            getFbsTrees({
                orgIds: that.searchForm.orgId
            }).then(res => {
                that.buildList = res.data
            })
        },
        // 获取系统
        getSysData() {
            let that = this
            getSysFcfCategoryTree().then(res => {
                if(res.status === 200) {
                    that.sysList = res.data
                }
            })
        },
        // 查询设备列表
        getDeviceList(pageIndex) {
            let that = this
            that.$Ctl.loading(1,10000)
            if (pageIndex) {
                that.currentPage = pageIndex
                that.searchForm.fcfId = ''
            }
            let parames = {
                organizationIds: that.searchForm.orgId,
                fbsId: that.searchForm.fbsId || '',
                systemId: that.searchForm.systemId,
                fcfId: that.searchForm.fcfId,
                name: that.searchForm.text,
                fireTType: that.fireTType,
                queryType: 1,
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize
            }
            that.listData = []
            getDetectorStatusList(parames).then(res => {
                if(res.status === 200) {
                    that.listData = res.data.details
                    that.total = res.total
                    // 默认选择第一个设备
                    if(res.data.details.length > 0) {
                        that.clickDevice(res.data.details[0])
                    }
                }
                that.$Ctl.loading(0)
            })
        },
        handleCurrentChange(currentPage) {
            this.getDeviceList(currentPage)
        },
        resultStyle(type) {
            let Map = {
                10: 'result-bj',
                20: 'result-gz',
                30: 'result-pb',
                40: 'result-ld',
                0: ''
            }
            return Map[type]
        },
        // 选择了某个设备
        clickDevice(item) {
            let that = this
            that.$Ctl.loading(1,10000)
            that.selectedFcId = item.fcFacilitiesId
            // 获取设备基本信息
            getBsFacsBaseInfo({
                fcfId: item.fcFacilitiesId
            }).then(res => {
                if(res.status === 200) {
                    that.$emit('selectDevice', res.data)
                } else {
                    that.$Ctl.loading(0)
                }
            })
        }
    },
    
    computed: {
        orgIdChange() {
            return this.searchForm.orgId
        },
        fbsIdChange() {
            return this.searchForm.fbsId
        },
        orgList(){
            return this.$store.state.orgList
        }
    },
    watch: {
        orgIdChange(val, oldVal) {
            if(val != oldVal) {
                // 清除之前选择的建筑物
                this.searchForm.fbsId = ''
                this.buildList = []
                this.defaultCheckedFbsId = []
                if(String(val).split(',').length == 1) {
                    // 获取建筑物数据
                    this.getBuildData()
                }
            }
        },
        fbsIdChange(val, oldVal) {
            if(val && val != oldVal) {
                this.getDeviceList(1)
            }
        },
        fireTType(val, oldVal) {
            if(val != oldVal) {
                // 状态选择改变，重新查询列表
                this.getDeviceList(1)
            }
        }
    }
}
</script>
<style lang="scss">
.device-list-wrap {
    position: relative;
    padding: 30px 0;
    width: 100%;
    height: 100%;
    .search-form {
        position: absolute;
        top: -65px;
        left: 120px;
        width: 900px;
        margin-left: 120px;
        display: flex;
        align-items: center;
        .el-select {
            margin: 0 10px;
        }
    }
    .header-type-choose {
        padding: 0 20px;
        width: 100%;
        height: 110px;
        .status-list {
            display: flex;
            justify-content: space-between;
            width: 100%;
            .status-item {
                width: 70px;
                height: 46px;
                line-height: 46px;
                border-radius:4px;
                font-size: 20px;
                text-align: center;
                font-weight:400;
                color: rgba(254,255,255,.2);
                background: rgba(254,255,255,.1);
                cursor: pointer;
            }
            .type-bj {
                color: #CE334F;
                background:rgba(206,51,79,0.2);
                border:1px solid rgba(206,51,79,1);
            }
            .type-gz {
                color: #F0A045;
                background:rgba(240,160,69,0.2);
                border:1px solid rgba(240,160,69,1);
            }
            .type-pb {
                color: #DADADA;
                background:rgba(218,218,218,0.2);
                border:1px solid rgba(218,218,218,1);
            }
            .type-ld {
                color: #286ED7;
                background:rgba(40,110,215,0.2);
                border:1px solid rgba(40,110,215,1);
            }
            .type-zc {
                color: #64A98B;
                background:rgba(100,169,139,0.2);
                border:1px solid rgba(100,169,139,1);
            }
        }
        .search-text {
            margin-top: 20px;
            .el-input__inner {
                color: rgba(255,255,255,1);
                font-size: 16px;
                background:rgba(81,166,250,0.1);
                border:1px solid rgba(81,166,250,1);
            }
            input::-webkit-input-placeholder{
                color:#505961;
            }
            input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:#505961;
            }
            input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:#505961;
            }
            input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                color:#505961;
            }
        }
    }
    .result-list-wrap {
        width: 100%;
        height: calc(100% - 130px);
        .result-list {
            cursor: pointer;
            margin-top: 30px;
            height: calc(100% - 80px);
            li {
                .result-item {
                    display: flex;
                    margin-bottom: 20px;
                    height: 90px;
                    align-items: center;
                    .device-item-img {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 20%;
                        height: 100%;
                    }
                    .device-item-desc {
                        padding: 15px 0;
                        width: 80%;
                        height: 100%;
                        .device-name {
                            font-size: 20px;
                            line-height: 30px;
                            color: #FFF;
                            .dealwith-status {
                                padding-right: 20px;
                                color: #F0A045;
                            }
                        }
                        .device-location {
                            font-size: 18px;
                            line-height: 30px;
                            color: #A3BEDD;
                            font-weight:400;
                        }
                    }
                }
                .result-bj {
                    background:rgba(209,47,78,0.2);
                }
                .result-gz {
                    background:rgba(240,160,69,0.2);
                }
                .result-pb {
                    background:rgba(218,218,218,0.2);
                }
                .result-ld {
                    background:rgba(40,110,215,0.2);
                }
                &.active {
                    .result-item {
                        border:2px solid rgba(141,183,232,1);
                        box-shadow:0px 0px 20px rgba(141,183,232,.6) inset;
                    }
                    .result-bj {
                        border: 2px solid rgba(209,47,78,1);
                        box-shadow:0px 0px 20px rgba(209,47,78,.6) inset;
                    }
                    .result-gz {
                        border: 2px solid rgba(240,160,69,1);
                        box-shadow:0px 0px 20px rgba(240,160,69,.6) inset;
                    }
                    .result-pb {
                        border: 2px solid rgba(218,218,218,1);
                        box-shadow:0px 0px 20px rgba(218,218,218,.6) inset;
                    }
                    .result-ld {
                        border: 2px solid rgba(42,120,237,1);
                        box-shadow:0px 0px 20px rgba(42,120,237,.6) inset;
                    }
                }
            }
        }
        .page-model {
            margin-top: 35px;
            text-align: center;
            .btn-prev,
            .btn-next {
                color: #FFF;
                border: 1px solid rgba(254,251,252,1);
                background: rgba(255, 255, 255, 0);
            }
            .el-pager {
                .el-icon,
                .number {
                    margin: 0 3px;    
                    color: #FFF;
                    border: 1px solid rgba(254,251,252,1);
                    background: rgba(255, 255, 255, 0);
                    &.active {
                        border: 1px solid rgba(79,134,235,1);
                        background:rgba(46,88,151,0.5);
                    }
                }
            }
        }
    }
}
</style>
